---------------------------
DIV
---------------------------

<div class="image-slider-container">
  <div class="image-slider">
    <img src="https://" alt="Before" class="slider-before">
    <img src="https://" alt="After" class="slider-after">
    <input type="range" min="0" max="100" value="50" class="slider-input">
    <div class="slider-line"></div>
    <div class="slider-button">
      <div class="slider-arrow left"></div>
      <div class="slider-arrow right"></div>
    </div>
    <div class="slider-label before">Before</div>
    <div class="slider-label after">After</div>
  </div>
</div>

---------------------------
SCRIPT
---------------------------

function custom_slider_script_itc() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
      const slider = document.querySelector('.slider-input');
      const afterImage = document.querySelector('.slider-after');
      const sliderButton = document.querySelector('.slider-button');
      const sliderLine = document.querySelector('.slider-line');

      // Only proceed if all elements exist
      if (slider && afterImage && sliderButton && sliderLine) {
        slider.addEventListener('input', (e) => {
          const value = e.target.value;
          // Update clipping
          afterImage.style.clipPath = `inset(0 0 0 ${value}%)`;
          // Sync arrow + line position
          sliderButton.style.left = `${value}%`;
          sliderLine.style.left = `${value}%`;
        });
      }
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_slider_script_itc');


---------------------------
CSS
---------------------------

 .image-slider-container {
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .image-slider {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .slider-before,
  .slider-after {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .slider-after {
    clip-path: inset(0 0 0 50%);
  }

.slider-input {
  position: absolute;
  width: 100%;
  height: 30px; 
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin: 0;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
	opacity:0;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  width: 100%;
  background: transparent;
  border: none;
}

.slider-input::-moz-range-thumb {
  height: 30px;
  width: 100%;
  background: transparent;
  border: none;
}

  .slider-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: white;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    transition: left 0.1s ease;
  }

  .slider-button {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
    transition: left 0.1s ease;
  }

  .slider-arrow {
    width: 8px;
    height: 8px;
    border: 2px solid #333;
    border-left: none;
    border-bottom: none;
  }

  .slider-arrow.left {
    transform: rotate(-135deg);
    margin-right: 2px;
  }

  .slider-arrow.right {
    transform: rotate(45deg);
    margin-left: 2px;
  }

  .slider-label {
    position: absolute;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    top: 1rem;
    z-index: 3;
    pointer-events: none;
  }

  .slider-label.before {
    left: 1rem;
    background: rgba(255, 255, 255, 0.7);
    color: black;
  }

  .slider-label.after {
    right: 1rem;
    background: linear-gradient(to right, #38bdf8, #3b82f6, #10b981);
    color: white;
    animation: gradient 3s ease infinite;
    background-size: 200% 200%;
  }

  @keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }